<template>
  <div class="default-main ba-table-box">
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      @action="baTable.onTableHeaderAction"
    />
    <Table ref="tableRef" :pagination="false" @action="baTable.onTableAction" />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, provide, markRaw } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, DictOperation } from "@/utils/common";
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import { DictData } from "@/api/backend/index";
import { useDictionary } from "@/store/backend/tool/dictionary";
import { useNavTabs } from "@/store/navTabs";
import { useRoute } from "vue-router";
import Tag from "./tag.vue";

const { proxy } = useCurrentInstance(); //mitt
const tableRef = ref();
const dict = useDictionary();
const route = useRoute();
const navTabs = useNavTabs();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + DictData)
      ? (navTabs as any).pageSizeMap.get(route.path + DictData)
      : 10;
  }
  return 10;
};

//初始化字典处理类
const dictOperation = new DictOperation();

const baTable = new baTableClass(
  new baTableApi(DictData), //this.api = api菜单管理相关
  {
    pk: "dictCode",
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("dictCode"),
        label: "字典编码",
        prop: "dictCode",
        align: "left",
        operator: false,
      },
      {
        show: filedShowOff("dictLabel"),
        label: "字典项标签",
        prop: "dictLabel",
        width: "150",
        render: "customRender",
        customRender: markRaw(Tag),
        align: "left",
      },
      {
        show: filedShowOff("dictType"),
        label: "字典项类型",
        width: "150",
        prop: "dictType",
        align: "left",
      },
      {
        show: filedShowOff("dictValue"),
        label: "字典键值",
        prop: "dictValue",
        align: "left",
        operator: false,
      },
      {
        show: filedShowOff("dictSort"),
        label: "显示排序",
        prop: "dictSort",
        align: "left",
        operator: false,
      },
      {
        show: filedShowOff("isDefault"),
        label: "是否默认",
        prop: "isDefault",
        align: "center",
        render: "tag",
        custom: { Y: "success", N: "danger" },
        replaceValue: {
          Y: "是",
          N: "否",
        },
      },
      {
        show: filedShowOff("status"),
        label: "状态",
        prop: "status",
        align: "center",
        width: "80",
        render: "tag",
        custom: { 0: "success", 1: "danger" },
        replaceValue: {
          0: "正常",
          1: "停用",
        },
      },
      {
        label: "操作",
        align: "center",
        width: "130",
        operator: false,
        render: "buttons",
        fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "editDict",
            title: "字典项编辑",
            text: "",
            type: "primary",
            icon: "iconfont icon-pencil",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
          {
            render: "confirmButton",
            name: "removeDict",
            title: "字典项删除",
            text: "",
            type: "danger",
            icon: "el-icon-DeleteFilled",
            class: "table-row-delete",
            popconfirm: {
              confirmButtonText: "删除",
              cancelButtonText: "取消",
              confirmButtonType: "danger",
              title: "确定删除所选项吗",
            },
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
      },
    ],
    filter: {
      pageSize: pageSizeKeep(),
    },
  },
  {},
  {
    getList: () => {
      baTable.api
        .list("", { dictType: dict.dictType, pageSize: pageSizeKeep() })
        .then((res: any) => {
          baTable.table.data = res.data;
          baTable.table.total = res.total;
        })
        .catch((err) => {});
      return false;
    },
  }
);

dict.$subscribe((state) => {
  baTable.getList("");
});
//修改字典项
const emit = defineEmits(["onPut"]);
const editDict = (name: string, row: any) => {
  //将详情赋值给添加表单
  emit("onPut", row);
};
const removeDict = (name: string, row: anyObj) => {
  dict
    .deleteDictSet(row)
    .then((res) => {
      dictOperation.updateDictionaryMoreTags(dict, dict.dictType); //更新字典moreTags
      baTable.getList("");
    })
    .catch((err) => {
      baTable.getList("");
    });
};

/**
 * 表格内的按钮响应
 * @param name 按钮name
 * @param row 被操作行数据
 */
proxy.eventBus.on("onTableButtonClick", (data: { name: string; row: any }) => {
  console.log("data", data);
  if (data.name == "editDict") {
    //编辑
    editDict(data.name, data.row);
    dict.opera = "edit";
  } else if (data.name == "removeDict") {
    //删除
    removeDict(data.name, data.row);
  }
});

onMounted(() => {
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(DictData);
});
// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
provide("dictOperation", dictOperation);

proxy.eventBus.on("refreshDict", () => {
  baTable.getList("");
});
</script>
<style lang="scss" scoped>
.ba-operate-dialog {
  .ba-operate-form {
    .formTip {
      margin-left: 120px;
    }

    .el-form {
      :deep(.el-form-item__content) {
        margin-top: 10px;
      }
    }
  }
}

@media screen and (max-width: 460px) {
  .ba-operate-dialog {
    .ba-operate-form {
      .formTip {
        margin-left: 0px;
      }

      .el-form {
        :deep(.el-form-item__content) {
          margin: 10px 0 0 0;
        }
      }
    }
  }
}
</style>
